<template>
  <view class="ad-banner">
    <swiper
      class="swiper-wrap"
      :style="[swiperStyle]"
      next-margin="20rpx"
      previous-margin="20rpx"
      :indicator-dots="false"
      autoplay
      circular
      :interval="data.data.autoplay * 1000"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in list" :key="index" class="swiper-item" @click="onClickSwiper($event, item)">
        <view class="felx flex-1 px-5">
          <image class="swiper-item-image" :src="item.imageUrl" mode="scaleToFill" :style="[imageStyle]"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
// 广告弹窗类型字典 1 首页 2 影院列表 3 订单详情成功页面相关 4 icon广告
const BANNER_PAGE_TYPE = { index: "1", cinema: "2", orderFilmInfo: "3", orderGoodsInfo: "3", orderMallInfo: "3", orderRechargeInfo: "3", icon: "4" }
export default {
  name: "ad-banner",
  mixins: [hook, weixin],
  props: {
    // 页面类型
    page: { type: String, default: "index" }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.handleGetBanner()
  },
  methods: {
    onClickSwiper(item) {
      this.$emit("click", item)
    },
    onSwiperChange({ detail }, index) {
      console.log(detail, index)
    },
    async handleGetBanner() {
      this.list = await uni.$api.banner.bannerList({ classification: BANNER_PAGE_TYPE[this.page] })
    }
  }
}
</script>

<style lang="scss" scoped></style>
